<template>
  <!-- 直播报名 -->
  <div class="streamovoback" id="streamovoback">
    <heads></heads>
    <div class="streamovoback_cont">
      <!-- 1v1 -->
      <div class="streamovoback_contB">
        <div class="streamovoback_cont_main">
          <div class="streamovoback_cont_main_video">
            <div class="streamovoback_cont_main_video_video">
              <video
                :src="videoSrc"
                ref="video"
                :show-center-play-btn="false"
                id="myVideo"
              ></video>
              <div
                class="streamovoback_cont_main_video_video_cover"
                v-if="playBtnShow"
              >
                <div
                  class="streamovoback_cont_main_video_video_cover_img"
                ></div>
                <div
                  class="streamovoback_cont_main_video_video_cover_cover"
                ></div>
                <div
                  class="streamovoback_cont_main_video_video_cover_btn"
                  @click="playervideo()"
                >
                  <i class="iconfont icon-bofangqi-bofangshu"></i>
                </div>
              </div>
            </div>
            <div class="streamovoback_cont_main_video_menu">
              <ul class="streamovoback_cont_main_video_menu_one">
                <li
                  v-for="(item, index) in courmunulistovo"
                  :key="index"
                  @click="playovoback(item.OpenId, item.Title)"
                  :class="{ courmunuactive: courmunuactive == item.OpenId }"
                >
                  <p>
                    <span class="streamovoback_cont_main_video_menu_left"
                      >回放</span
                    >
                    <span v-text="item.Title"></span>
                  </p>
                </li>
              </ul>
            </div>
          </div>
          <div class="streamovoback_cont_main_info">
            <div class="streamovoback_cont_main_info_tit">
              <p>
                <!-- <span v-html="courmunulistdetail.CourseName"></span> -->
                <span v-if="courmunulistdetail.IsApply == false"
                  >试看5分钟</span
                >
              </p>
              <p>
                <span>{{ huifmenuTitle }}</span>
              </p>
            </div>
            <div
              class="streamovoback_cont_main_info_btn"
              @click="streamingcourse()"
            >
              预约下期直播课
            </div>
          </div>
          <!-- <div style="clear: both"></div> -->
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 是否展示1v1列表
      isShowovo: false,
      courmunuactive: "",
      courmunuovoactive: "",

      courmunulistdetail: {
        CourseName: "",
        IsApply: false,
      },

      courmunulist: [],

      // 一对一列表
      courmunulistovo: [],

      show: false,
      stretab: 0,
      classes: "",

      coursedetail: {},
      coursedescribe: [],
      // 内容简介
      coursedescribetit: "",
      // 课程概括
      coursedescribecont: [],
      // 课程目录
      muldescribecont: [],
      zheprice: "",

      // 关键词
      keywordcont: [],
      // 付费页面班级id传参
      classId: "",
      // 付费页面课程id传参
      courseId: "",
      // 折扣
      disCount: "",

      // 弹框
      dialogFormVisible: false,

      formLabelWidth: "80px",
      time: "获取验证码",
      mobileB: "",

      dialogttercou: false,

      state: false,

      // 视频播放第一个id
      huifmenuopenId: "",
      // 视频播放第一个name
      huifmenuoname: "",
      // title赋值
      huifmenuTitle: "",

      Ismobile: "",

      isIsApply: "",
      query: {},
      videoSrc: "",
      playBtnShow: true, //播放按钮
    };
  },
  methods: {
    // 点击1v1回放标题赋值视频链接
    playovoback(id, name) {
      // 加密完成
      this.courmunuactive = id;
      this.$httphelper
        .post("/api/LmCourseApi/GetLiveOneToOnePart", {
          Sign: "string",
          OpenId: id,
        })
        .then((res) => {
          this.huifmenuTitle = name;
          this.videoSrc = res.data.data.PlayBackPath;
          // 判断此视频是否有回放
          const videoContext = wx.createVideoContext("myVideo");
          videoContext.play();
          if (res.data.data.PlayBackPath == "") {
            this.$message({
              message: "此视频暂无回放",
              type: "warning",
            });
            this.playBtnShow = true;
            videoContext.pause();
            //     $("#streamovoback_cont_main_video_video").get(0).pause();
            //     $(".streamovoback_cont_main_video_video_cover").css(
            //       "display",
            //       "block"
            //     );
            //     $(".streamovoback_cont_main_video_video_cover_btn").css(
            //       "display",
            //       "none"
            //     );
            //     $(".streamovoback_cont_main_video_video_cover_cover").css(
            //       "display",
            //       "none"
            //     );
          } else {
            this.playBtnShow = false;
            videoContext.play();
            // $(".streamovoback_cont_main_video_video_cover").css(
            //   "display",
            //   "none"
            // );
            //     $("#streamovoback_cont_main_video_video").get(0).play();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 播放视频
    playervideo() {
      this.playovoback(this.huifmenuopenId, this.huifmenuoname);
    },

    // 直播回放目录
    gethuifmenu() {
		console.log( "asds我的天哪");
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetOnetoOnePlayList", {
          Sign: "string",
          OpenId: this.query.OpenId,
        })
        .then((res) => {
          this.isShowovo = !this.isShowovo;
          this.courmunulistovo = res.data.data;
          this.huifmenuopenId = this.courmunulistovo[0].OpenId;
          this.huifmenuoname = this.courmunulistovo[0].Title;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 预约下期直播课
    streamingcourse() {
      this.$uniRouter.push({
        path: "/streaming/streamingHome",
      });
    },
  },
  created() {
    // if(this.query.OpenI){
    // this.playback(false,this.query.OpenId,this.query.title,this.query.index)
    // }
  },
  mounted() {
    // 判断视频播放是否结束并且判断是否是报名用户，反则报名观看全程
    if (!this.state) {
      //   document.getElementById(
      //     "streamovoback_cont_main_video_video"
      //   ).loop = false; // 不设置视频循环播放
      //   document
      //     .getElementById("streamovoback_cont_main_video_video")
      //     .addEventListener(
      //       "ended",
      //       () => {
      //         //该视频播放是否已结束
      //         this.state = true;
      //       },
      //       false
      //     );
    }
  },
  onLoad(e) {
    this.Ismobile = this.$localStorage.getItem("Mobile");
    this.query = e;
    this.gethuifmenu();
  },
};
</script>

<style lang="less" scoped>
#streamovoback {
  width: 100%;
  .streamovoback_cont {
    width: 100%;
    height: 100%;
    .streamovoback_cont_crumbs {
      width: 1140px;
      height: 20px;
      margin: 0 auto;
      position: relative;
      margin-top: 28px;
      text-align: left;
      line-height: 20px;
      padding-left: 10px;
      span:nth-child(1) a,
      span:nth-child(3) a,
      span:nth-child(4) a {
        color: #000000;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
      }
      i {
        color: #767c82;
        font-size: 18px;
        margin-left: 10px;
        font-weight: bold;
      }
      span:nth-child(5) {
        a {
          color: #000;
          font-size: 16px;
          margin-left: 10px;
          font-weight: bold;
          cursor: pointer;
        }
      }
      span:nth-child(6),
      span:nth-child(7) {
        color: #ff7301;
        font-size: 16px;
        margin-left: 10px;
        font-weight: bold;
        cursor: pointer;
        a {
          color: #ff7301;
        }
        /deep/p {
          display: inline-block;
        }
      }
    }
    .streamovoback_cont_main {
      width: 1200px;
      // height: 354px;
      margin: 0 auto;
      position: relative;
      margin-top: 38px;
      padding-bottom: 30px;
      height: 380px;
      .streamovoback_cont_main_left {
        width: 600px;
        height: 338px;
        float: left;
        position: relative;
        img {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
        .streamovoback_cont_main_left_cover {
          width: 100%;
          height: 100%;
          background: rgba(21, 21, 27, 0.7);
          position: absolute;
          top: 0;
          left: 0;
          .streamovoback_cont_main_left_cover_ifno {
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            margin-top: -39px;
            p {
              text-align: center;
              color: #fff;
            }
            p:nth-child(1) {
              font-size: 24px;
            }
            p:nth-child(2) {
              font-size: 16px;
              margin-top: 14px;
              a {
                display: inline-block;
                color: #fff;
                font-size: 16px;
                display: inline-block;
                border-bottom: 1px solid #fff;
                padding-bottom: 2px;
                margin-left: 25px;
              }
            }
          }
        }
        .streamovoback_cont_main_left_promise {
          font-size: 14px;
          color: #999;
          height: 26px;
          line-height: 26px;
          i {
            font-size: 25px;
            color: #8ac2f3;
            position: relative;
            top: 5px;
          }
          span {
            cursor: pointer;
          }
        }
      }
      .streamovoback_cont_main_right {
        width: 570px;
        // height: 350px;
        float: right;
        .streamovoback_cont_main_right_tit {
          font-size: 22px;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          white-space: nowrap;
          a {
            color: #333;
            font-size: 22px;
          }
          span {
            font-size: 16px;
            color: #999;
            margin-left: 10px;
          }
        }
        .streamovoback_cont_main_right_paycount {
          color: #999;
          font-size: 15px;
          margin-top: 10px;
          i {
            width: 1px;
            height: 10px;
            border-right: 1px solid #999;
            margin-left: 20px;
            margin-right: 20px;
          }
          span {
            background: #eee;
            border-radius: 9px;
            line-height: 16px;
            padding: 5px 6px;
            display: inline-block;
            font-size: 14px;
            line-height: 1;
            color: #777;
            transform: scale(0.82);
          }
          // span{
          //   background: #eee;
          //   border-radius: 9px;
          //   line-height: 16px;
          //   padding:5px 6px;
          //   display: inline-block;
          //   font-size: 14px;
          //   line-height: 1;
          //   color: #777;
          //   transform: scale(0.82);
          // }
        }
        .streamovoback_cont_main_right_date {
          border: 1px solid #e5e5e5;
          padding: 5px 15px 6px;
          position: relative;
          margin-top: 32px;
          height: 49px;
          line-height: 42px;
          .hidden-clip {
            clip: inherit;
            top: -20px;
            font-size: 16px;
            background: #fff;
            line-height: 35px;
            padding: 0 5px;
            position: absolute;
          }
          p {
            color: #333;
            font-size: 15px;
          }
        }
        .streamovoback_cont_main_right_price {
          width: 100%;
          margin-top: 18px;
          border: 1px solid #ff7301;
          // height: 84px;
          .streamovoback_cont_main_right_price_top {
            background-color: #ff7301;
            height: 40px;
            line-height: 40px;
            padding-left: 15px;
            span {
              // text-decoration:line-through;
              font-size: 18px;
              color: #fff;
              // font-family: "Hiragino Sans GB","Microsoft Yahei",arial,\5b8b\4f53,"Helvetica Neue",Helvetica,STHeiTi,sans-serif;
            }
          }
          .streamovoback_cont_main_right_price_bottom {
            width: 100%;
            ul {
              width: 100%;
              li {
                list-style: none;
                padding: 10px 16px 10px 16px;
                span:nth-child(1) {
                  font-size: 23px;
                  color: #ff7301;
                  position: relative;
                  top: 1px;
                  cursor: pointer;
                }
                span:nth-child(2) {
                  font-size: 16px;
                  color: #5d7283;
                  margin-left: 10px;
                  position: relative;
                  top: -1px;
                  cursor: pointer;
                  text-decoration: line-through;
                }
              }
            }
          }
        }
        .streamovoback_cont_main_right_subpay {
          float: left;
          width: 120px;
          height: 40px;
          line-height: 40px;
          background: #ff7301;
          color: #fff;
          font-size: 18px;
          text-align: center;
          margin-top: 30px;
          cursor: pointer;
          span {
            display: block;
          }
        }
        .streamovoback_cont_main_right_subpay:hover {
          background: #ff4343;
        }
        .streamovoback_cont_main_right_zixu {
          // display: inline-block;
          width: 120px;
          height: 40px;
          line-height: 40px;
          border: 1px solid #0c8ed0;
          color: #0c8ed0;
          font-size: 18px;
          text-align: center;
          margin-top: 30px;
          cursor: pointer;
          margin-left: 25px;
          float: left;
        }
        .streamovoback_cont_main_right_zixuB {
          width: 120px;
          height: 41px;
          line-height: 41px;
          border: 1px solid #0c8ed0;
          color: #0c8ed0;
          font-size: 18px;
          text-align: center;
          margin-top: 30px;
          cursor: pointer;
          margin-left: 25px;
          float: left;
          background-size: cover;
          // width: 103px;
          // height: 35px;
          // line-height: 35px;
          // // color: #0c8ed0;
          // font-size: 16px;
          // text-align: center;
          // margin-top: 32px;
          // cursor: pointer;
          // margin-left: 25px;
          // float: right;
          // i{
          //   font-size: 20px;
          //   vertical-align: middle;
          //   margin-right: 3px;
          //   color: #8ac2f3;
          // }
          // span{
          //   font-size: 16px;
          // }
        }
        .streamovoback_cont_main_right_zixuB:hover {
          span {
            font-weight: bold;
          }
        }
        .streamovoback_cont_main_right_zixu_erweima {
          width: 187px;
          height: 103px;
          border: 1px solid #f4f4f4;
          float: right;
          margin-right: 16%;
          margin-top: 6px;
          background: #fff;
          img {
            width: 52%;
            display: inherit;
            height: 100%;
            margin: 0 auto;
            float: left;
          }
          span {
            float: right;
          }
          span:nth-child(2) {
            margin-top: 32px;
            margin-right: 13%;
          }
          span:nth-child(4) {
            margin-right: 6%;
            margin-top: 6px;
          }
        }
      }
    }

    .streamovoback_contB {
      width: 100%;
      height: auto;
      padding-bottom: 50px;
      position: relative;
      .academicCont_crumbs {
        width: 1140px;
        height: 20px;
        margin: 0 auto;
        position: relative;
        margin-top: 28px;
        text-align: left;
        line-height: 20px;
        padding-left: 10px;
        span:nth-child(1) a {
          color: #000000;
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
        }
        i {
          color: #767c82;
          font-size: 18px;
          margin-left: 10px;
          font-weight: bold;
        }
        span:nth-child(3) {
          color: #ff7301;
          font-size: 16px;
          margin-left: 10px;
          font-weight: bold;
          cursor: pointer;
        }
      }
      .streamovoback_cont_main {
        width: 1200px;
        height: 582px;
        // background: #000;
        margin: 0 auto;
        .streamovoback_cont_main_video {
          width: 100%;
          height: 490px;
          .streamovoback_cont_main_video_video {
            width: 870px;
            height: 210px;
            float: left;
            position: relative;
            border: 1px solid #e9e9e9;
            border-right: none;
            border-bottom: none;
            video {
              width: 100%;
              height: 100%;
            }
            .streamovoback_cont_main_video_video_cover {
              .streamovoback_cont_main_video_video_cover_cover {
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.6);
                position: absolute;
                top: 0;
                left: 0;
              }
              .streamovoback_cont_main_video_video_cover_img {
                width: 100%;
                height: 100%;
                background: url("https://uniappfile.bosihw.cn/Res/BosihuiwenRes/yyqklm/zb/zjhb.png") no-repeat;
                background-size: cover;
                position: absolute;
                top: 0;
                left: 0;
              }
              .streamovoback_cont_main_video_video_cover_btn {
                width: 96px;
                height: 96px;
                border-radius: 50%;
                color: #fff;
                text-align: center;
                line-height: 109px;
                background-color: #08cb6a;
                background-color: #003c80;
                position: absolute;
                z-index: 1;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                i {
                  font-size: 60px;
                  color: #fff;
                  position: relative;
                }
              }
              .streamovoback_cont_main_video_video_cover_btn:hover {
                background-color: #12a7ff;
              }
            }
          }
          .streamovoback_cont_main_video_menu {
            width: 330px;
            height: 100%;
            float: right;
            background: #131313;
            overflow: hidden;
            overflow-y: auto;
            .streamovoback_cont_main_video_menu_one {
              padding: 8px;
              width: 100%;
              box-sizing: border-box;
              // height: 100%;
              .courmunuactive {
                p {
                  span:nth-child(1) {
                    background: #003c80;
                    color: #333;
                  }
                  span:nth-child(2) {
                    color: #003c80 !important;
                  }
                }
              }
              li:hover {
                p {
                  span:nth-child(1) {
                    background: #003c80;
                    color: #333;
                  }
                  span {
                    color: #003c80;
                  }
                }
              }
              li {
                list-style: none;
                width: 94%;
                margin: 0 auto;
                border-bottom: 1px solid #2a2a2a;
                padding: 15px 0;
                cursor: pointer;
                .streamovoback_cont_main_video_menu_left {
                  display: inline-block;
                  width: 35px;
                  height: 20px;
                  background: #777777;
                  text-align: center;
                  line-height: 20px;
                  color: #333;
                  font-weight: bold;
                  border-radius: 3px;
                  font-size: 14px;
                }
                span:nth-child(2) {
                  float: right;
                  width: 85%;
                  color: #c7c7c7;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  white-space: nowrap;
                }
              }
            }
            .streamovoback_cont_main_video_menu_two {
              padding: 8px;
              width: 76%;
              // height: 100%;
              margin-left: 7%;
              margin-top: -15px;
              .courmunuovoactive {
                p {
                  span:nth-child(1) {
                    background: #003c80;
                    color: #333;
                  }
                  span:nth-child(2) {
                    color: #003c80 !important;
                  }
                }
              }
              li:hover {
                p {
                  span:nth-child(1) {
                    background: #003c80;
                    color: #333;
                  }
                  span {
                    color: #003c80;
                  }
                }
              }
              li {
                list-style: none;
                width: 94%;
                margin: 0 auto;
                border-bottom: 1px solid #2a2a2a;
                padding: 15px 0;
                cursor: pointer;
                .streamovoback_cont_main_video_menu_left {
                  display: inline-block;
                  width: 35px;
                  height: 20px;
                  background: #777777;
                  text-align: center;
                  line-height: 20px;
                  color: #333;
                  font-weight: bold;
                  border-radius: 3px;
                  font-size: 14px;
                }
                span:nth-child(2) {
                  float: right;
                  width: 78%;
                  color: #c7c7c7;
                  font-size: 14px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 1;
                  line-clamp: 1;
                  white-space: nowrap;
                }
              }
            }
          }
        }
        .streamovoback_cont_main_info {
          width: 100%;
          height: 92px;
          padding: 14px 16px;
          background-color: #232323;
          box-sizing: border-box;
          .streamovoback_cont_main_info_tit {
            width: 850px;
            height: 64px;
            float: left;
            p:nth-child(1) {
              font-size: 22px;
              span:nth-child(1) {
                color: #fff;
              }
              span:nth-child(2) {
                color: #ff4f23;
              }
            }
            p:nth-child(2) {
              margin-top: 3px;
              color: #003c80;
              font-size: 20px;
              span {
                display: inline-block;
                margin-right: 32px;
              }
            }
          }
          .streamovoback_cont_main_info_btn {
            width: 293px;
            height: 50px;
            float: right;
            background: #003c80;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            margin-top: 9px;
          }
          .streamovoback_cont_main_info_btn:hover {
            background-color: #12a7ff;
          }
        }
      }
    }
  }

  /deep/.el-dialog__header {
    border-bottom: 1px solid #efefef !important;
  }
  .dialogttercou {
    /deep/.el-dialog {
      width: 50%;
    }
    /deep/.el-dialog__title {
      text-align: center;
      margin-left: 43%;
      font-size: 25px;
      font-weight: bold;
    }
    p {
      font-size: 18px;
      // text-indent: 2em;
      line-height: 37px;
      text-align: justify;
      margin-bottom: 10px;
      color: #000;
    }
    p:nth-child(1) {
      span {
        font-weight: bold;
      }
    }
    div {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      img {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
@media screen and (min-width: 1010px) {
  .moexpert {
    display: none;
  }
  .mowhite {
    display: none;
  }
}
@media screen and (max-width: 1010px) {
  .streamovoback {
    width: 100vw;
    overflow-x: hidden;
  }
  .mowhite {
    width: 100%;
    height: 50px;
    background: #fff;
  }
  .streamovoback_contB {
    padding-bottom: 0px !important;
  }

  .streamovoback_cont_main_right_subpay {
    width: 28% !important;
  }
  .streamovoback_cont_main_right_zixuB {
    width: 28% !important;
    // margin-left: 0px!important;
  }
  .streamovoback_cont_main_right_zixu {
    width: 28% !important;
    margin-left: 19px;
  }
  .wepcexpert {
    display: none;
  }
  /deep/.el-dialog {
    width: 84% !important;
  }
  .streamovoback_cont {
    // margin-bottom: 86px;
    .streamovoback_cont_crumbs {
      display: none;
    }
    .streamovoback_cont_main {
      width: 100% !important;
      height: auto !important;
      .streamovoback_cont_main_video {
        width: 100% !important;
        height: auto !important;
        .streamovoback_cont_main_video_video {
          width: 100% !important;
          height: 210px !important;
          .streamovoback_cont_main_video_video_cover {
            .streamovoback_cont_main_video_video_cover_btn {
              width: 48px !important;
              height: 48px !important;
              i {
                font-size: 40px !important;
                left: 0px !important;
              }
            }
          }
        }
      }
      .streamovoback_cont_main_info {
        display: none;
      }
      .streamovoback_cont_main_video_menu {
        width: 100% !important;
      }

      .streamovoback_cont_main_left {
        width: 100% !important;
        height: 234px !important;
        float: none !important;
        .streamovoback_cont_main_left_promise {
          display: none;
        }
        .streamovoback_cont_main_left_cover_ifno {
          top: 42% !important;
          p:nth-child(1) {
            font-size: 20px !important;
          }
        }
      }
      .streamovoback_cont_main_right {
        width: 94% !important;
        margin: 0 auto;
        float: none !important;
        margin-top: 15px;
        .streamovoback_cont_main_right_tit {
          width: 100% !important;
        }
        .streamovoback_cont_main_right_paycount {
          span {
            margin-bottom: 6px;
          }
        }
        .streamovoback_cont_main_right_date {
          height: auto !important;
        }
      }
    }
  }
  .streamovoback_cont_body {
    .streamovoback_cont_body_main {
      width: 100% !important;
      margin: 0 auto;
      .streamovoback_cont_body_left {
        width: 100% !important;
        .moexpert {
          width: 100%;
          ul {
            width: 100%;
            height: 100%;
            li {
              list-style: none;
              width: 50% !important;
              float: left;
              margin-right: 0 !important;
              height: 284px !important;
              border: none !important;
              padding: 15px 7px;
              margin-bottom: 12px;
              .moexpert_exrtpimg {
                width: 100%;
                height: 180px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              p:nth-child(2) {
                color: #0c8ed0;
                text-align: left;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                font-size: 18px;
                margin-top: 5px;
                a {
                  color: #0c8ed0;
                }
              }
              p:nth-child(3) {
                text-align: justify;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                /* autoprefixer: off */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                font-size: 14px;
                a {
                  color: #333;
                }
              }
            }
          }
        }
        .streamovoback_cont_body_left_tab_contB {
          ul {
            li {
              height: auto !important;
              .streamovoback_cont_body_left_tab_contB_bottom {
                height: auto !important;
                p {
                  margin-left: 18% !important;
                }
              }
            }
          }
        }
      }
    }
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 16px;
  // background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  // background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}

@media screen and (max-width: 1010px) {
  .message-logout {
    width: 80% !important;
  }
}
</style>